<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="12">
						<view class="demo-layout bg-purple-light">
							<text>19896</text>
							<text>积分可用</text>
						</view>
					</u-col>

				</u-row>
				<u-row customStyle="margin-bottom: 10px">
					<u-col span="12">
						<view class="demo-layout1 bg-purple-center">
							<view class="u-demo-block__content m-t-10">
								<view class="u-page__tag-item">
									<u-search shape="square" height="30" label="兑换现金" :show-action="false" placeholder="你希望用多少积分来兑换余额">
									</u-search>
								</view>
							</view>
							<view class="guize">
								规则：100 积分兑换 100 金额，兑换成功后，可以在我的钱包查看。
							</view>

						</view>

					</u-col>
				</u-row>
				<u-row justify="space-between">
					<u-col span="12">
						<view class="demo-layout2 bg-purple-dark">
							<view class="button">
								<u-button text="立即兑换" size="normal" type="error"></u-button>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>
<style lang="scss">
	.wrap {
		padding: 12px;
	}

	.demo-layout {
		text-align: center;
		line-height: 100px;
		height: 105px;
		color: #fff;
		font-size: 30px;

		background-color: #4B4F64;
		border-radius: 4px;
	}

	.demo-layout1 {
		// position: fixed;
		position: relative;
		text-align: center;
		line-height: 100px;
		height: 400px;
		color: #fff;
		font-size: 30px;
		// background-color: #4B4F64;
		border-radius: 4px;
	}

	.demo-layout2 {
		text-align: center;
		line-height: 80px;
		height: 30px;
		color: #fff;
		font-size: 30px;

		// background-color: #4B4F64;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
		font-size: 30px;
	}

	.bg-purple-center {
		background: #f7f7f7;
	}

	.bg-purple-light {
		background: #4B4F64;
	}

	.bg-purple-dark {
		background: #fff;
	}

	.button1 {
		width: 200px;
		text-align: center;
		padding-top: 30px;
		color: black;

	}

	.sousuo {}

	.button {
		width: 200px;
		text-align: center;
		margin: 0 auto;
		padding-top: 30px;
	}

	.guize {
		color: #CED7E1;
		font-size: 20px;
		text-align: left;

	}
	.u-page__tag-item {
			@include flex(column);
			flex: 1
			
		}
	
		.m-t-10 {
			
			margin-top: 10px;
		}
</style>
